<template>
  <el-drawer
    class="basic-drawer"
    title="证书颁发机构"
    :model-value="visible"
    :size="1000"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    @open="handleOpen"
    @closed="handleClose"
  >
    <el-button type="primary" class="mb-6" @click="handleCreate()">
      <app-icon name="add" class="mr-2" /> 创建机构
    </el-button>
    <el-table
      ref="tableRef"
      v-loading="loading"
      :tooltip-options="{ popperClass: 'basic-tooltip' }"
      class="basic-table"
      :data="data"
    >
      <template #empty><table-empty /></template>
      <el-table-column
        prop="name"
        label="名称"
        show-overflow-tooltip
        :formatter="emptyFormatter"
        min-width="164"
      />
      <el-table-column
        prop="key_type"
        label="密钥算法"
        min-width="164"
        :formatter="emptyFormatter"
      >
        <template #default="{ row }">
          {{ getOptionsLabel(ALGORITHM_OPTS, row.key_type) }}
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="时间" min-width="200">
        <template #default="{ row }">
          {{ formatUnix(row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="action" width="200">
        <template #default="{ row }">
          <div class="flex">
            <el-button type="primary" link @click="handleSign(row)">
              签发证书
            </el-button>
            <el-button type="primary" link @click="handleDetail(row)">
              详情
            </el-button>
            <el-button
              class="ml-4"
              type="danger"
              link
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <basic-pagination
      :pagination="pagination"
      :disabled="loading"
      @change="getTableList()"
    />
    <!--
     <el-tabs
      v-else
      v-model="activeName"
      class="custom-tabs"
      @tab-change="tabChange"
    >
      <el-tab-pane label="机构详情" name="detail">
        <institutional-detail ref="institutionalRef" />
      </el-tab-pane>
      <el-tab-pane label="csr" name="csr">
        <csr-detail ref="csrRef" />
      </el-tab-pane>
      <el-tab-pane label="私钥" name="secretKey">
        <secret-key-detail ref="secretKeyRef" />
      </el-tab-pane>
    </el-tabs> -->
  </el-drawer>
  <self-sign-cert-dialog
    v-model:visible="signState.visible"
    v-model:loading="signState.loading"
    :record="signState.record!"
  />
  <create-institution-dialog
    v-model:visible="createState.visible"
    v-model:loading="createState.loading"
    @refresh="getTableList()"
  />
  <organ-detail-dialog
    v-model:visible="organState.visible"
    v-model:loading="organState.loading"
    :record="organState.record!"
  />
</template>
<script lang="ts" setup>
import type { SelfCertModel, SelfCertParams } from '@/apis/model/selfCert'
import { ALGORITHM_OPTS } from '@/config/constant/cert'

import CreateInstitutionDialog from './dialogs/CreateInstitutionDialog.vue'
import OrganDetailDialog from './dialogs/OrganDetailDialog.vue'
import SelfSignCertDialog from './dialogs/SelfSignCertDialog.vue'
interface IProps {
  visible: boolean
}
withDefaults(defineProps<IProps>(), {
  visible: false
})
// 刷新表格事件
interface IEmit {
  (event: 'update:visible', value: boolean): void
  (event: 'refresh'): void
}
const { setMessageBox } = useMessageBox()
const emit = defineEmits<IEmit>()
const signState = reactive<CommonDialog<SelfCertModel>>({
  visible: false,
  record: undefined,
  loading: false
})
const createState = reactive({
  visible: false,
  loading: false
})
const organState = reactive<CommonDialog<SelfCertModel>>({
  visible: false,
  record: undefined,
  loading: false
})
const queryState = reactive<SelfCertParams & SortCustomParams>({
  limit: 0,
  offset: 20,
  sort: 'created_at',
  order: 'desc'
})

const {
  data,
  loading,
  pagination,
  run: getTableList
} = useListRequest(getSelfCertListApi, queryState)

//弹窗打开
const handleOpen = () => {
  getTableList()
}
const handleCreate = () => {
  createState.visible = true
}
const handleSign = (row: SelfCertModel) => {
  signState.visible = true
  signState.record = row
}
const handleDetail = (row: SelfCertModel) => {
  organState.visible = true
  organState.record = row
}

function handleDelete(row: any) {
  setMessageBox({
    icon: true,
    isHtml: true,
    content: '<p>确定删除此机构？</p>',
    title: '提示',
    async submit() {
      try {
        await deleteSelfCertApi({ id: row.id! })
        ToastUtils.success('删除成功')
        getTableList()
        setMessageBox({ visible: false })
      } finally {
        setMessageBox({ loading: false })
      }
    }
  })
}

//弹窗关闭
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style lang="scss" scoped>
.custom-tabs {
  :deep(.el-tabs__nav-wrap)::after {
    height: 0px;
  }
}
</style>
